<html>
    <head>
        <!--引入本地Vue.js-->
        <!-- <script src="/labs/vue.js"></script> -->
        <!--CDN引入-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    </head>
    <body>
        <dvi id="app">
            {{message}}  <!--插值表达式-->

            <!-- v-bind:title="message"  与下面的:title="message"效果完全一样的 -->
            <span v-bind:title="message">
                鼠标悬停几秒查看此动态绑定的的提示信息
            </span>
            <!--
                你看到的v-bind attribute被称为"指令" 。
                "指令"带有前缀 "v-" ,以表示它们是Vue提供的特殊attribute.
                它们会在渲染的DOM上应用特殊的响应式行为。
                在这里，这个指令的意思是："将这个节点的title attribute 绑定到Vue实例的 message property上"
            -->
        </dvi>
        <!--
            已经成功创建了一个Vue应用，现在数据和DOM已经被建立的链接，所有东西都是"响应式的"

            注意，在app 实例下(#app元素内) 我们已经不再和HMTL直接打交道了。
            一个Vue实例将会被挂在那到DOM上，然后对其进行完全控制。
            那个HTML元素(#app)是我们的入口，其余的所有内容都会发生在心里创建的Vue实例内部。
        -->
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    message:'hello world'+new Date().toLocaleString()
                }
            });
        </script>
    </body>
</html>